<template>
	<view>
		<view name="头像" style="text-align: center;">
			<u-image customStyle="margin:20px auto;" :showLoading="true" :src="profile.img" width="80px" height="80px" shape="circle"></u-image>
			<u-text customStyle="margin:0px auto;" type="info" text="点击更换头像" :size="12" @click="uploadAvatar"></u-text>
		</view>
		<view name="信息表单" style="margin:20px 0px 0px 0px;">
			<u-cell-group customStyle="font-size:12px;">
				<u-cell title="昵称" :value="profile.nickName" :isLink="true" arrow-direction="right" @click="toPage('nickName')"></u-cell>
				<u-cell title="姓名" :value="profile.realName" :isLink="true" arrow-direction="right" @click="toPage('realName')"></u-cell>
				<u-cell title="微信" :value="profile.wechat" :isLink="true" arrow-direction="right" @click="toPage('wechat')"></u-cell>
				<u-cell title="性别" @click="this.showSexPicker = !this.showSexPicker" :value="profile.sexTxt">
					<view slot="value">{{ profile.sexTxt }}</view>
				</u-cell>
				<u-cell title="生日" @click="this.showDatePicker = !this.showDatePicker" :value="profile.birthday">
					<view slot="value">{{ profile.birthday }}</view>
				</u-cell>
				<u-cell title="邮箱" :value="profile.email" :isLink="true" arrow-direction="right" @click="toPage('email')"></u-cell>
			</u-cell-group>
		</view>

		<view name="底部按钮" style="margin: 20px 10px 0px 10px;"><u-button type="primary" :loading="loading" text="保存" @click="save"></u-button></view>

		<u-picker :show="showSexPicker" @cancel="this.showSexPicker = !this.showSexPicker" :columns="sexOpts" keyName="label" @confirm="pickSex"></u-picker>
		<u-datetime-picker :show="showDatePicker" @confirm="pickDate" @cancel="this.showDatePicker = !this.showDatePicker" :minDate="-631180800000" mode="date"></u-datetime-picker>
	</view>
</template>

<script>
import { SexOpts, DefaultHead, Toast } from '@/utils/common.js';
import { IMG_SERVER, Request, VITE_API_URL } from '@/utils/request.js';
import { User } from '@/utils/user.js';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
export default {
	data() {
		return {
			loading: false,
			showSexPicker: false,
			showDatePicker: false,
			profile: {},
			sexOpts: [SexOpts]
		};
	},
	onLoad() {
		let _ = this;
		uni.$on('emitParams', data => {
			if (data && data.name == 'nickName') {
				_.profile.nickName = data.value;
			} else if (data && data.name == 'realName') {
				_.profile.realName = data.value;
			} else if (data && data.name == 'email') {
				_.profile.email = data.value;
			} else if (data && data.name == 'wechat') {
				_.profile.wechat = data.value;
			}
		});
		console.log('setting页面显示...');
		this.loadProfile();
	},
	onShow() {},
	methods: {
		//上传头像
		uploadAvatar() {
			let _ = this;
			uni.chooseImage({
				count: 1,
				success(res) {
					console.log('图片选择结果>>>', res);
					if (res.tempFilePaths.length > 0) {
						let filePath = res.tempFilePaths[0];
						console.log('上传文件路径>>>', filePath);
						uni.uploadFile({
							url: VITE_API_URL + '/api/image/avatar/upload',
							name: 'file',
							filePath: filePath,
							header: {
								token: User.getToken()
							},
							success(res) {
								console.log('图片上传返回结果>>>', res);
								if (res.data) {
									let result = JSON.parse(res.data).result;
									_.profile.avatar = result[0].savePath;
									_.profile.img = IMG_SERVER + result[0].savePath;
								}
							},
							fail(res) {}
						});
					}
				}
			});
		},
		//页面跳转
		toPage(page) {
			let url = '';
			if (page == 'nickName') {
				url = '/pages/components/form/textarea/index?data=' + this.profile.nickName + '&name=nickName';
			} else if (page == 'realName') {
				url = '/pages/components/form/textarea/index?data=' + this.profile.realName + '&name=realName';
			} else if (page == 'email') {
				url = '/pages/components/form/textarea/index?data=' + this.profile.email + '&name=email';
			} else if (page == 'wechat') {
				url = '/pages/components/form/textarea/index?data=' + (this.profile.wechat == null ? '' : this.profile.wechat) + '&name=wechat';
			}
			uni.navigateTo({
				url: url
			});
		},
		//性别选择
		pickSex(val) {
			this.profile.sex = val.value[0].value;
			this.profile.sexTxt = val.value[0].label;
			this.showSexPicker = !this.showSexPicker;
		},
		//日期选择
		pickDate(val) {
			let date = dayjs(val.value).format('YYYY-MM-DD');
			console.log('date is ', date);
			this.profile.birthday = date;
			this.showDatePicker = false;
		},
		handleDateChange: function(e) {
			this.profile.birthday = e.detail.value;
		},
		loadProfile() {
			let _ = this;
			User.getProfile().then(res => {
				let profile = res;
				profile.sexTxt = _.sexTxt(profile.sex);
				profile.birthday = profile.birthday == null ? '' : dayjs(profile.birthday).format('YYYY-MM-DD');
				profile.img = IMG_SERVER + profile.avatar;
				console.log('profile is ', profile);
				_.profile = profile;
			});
		},
		sexTxt(sex) {
			let txt = '';
			for (let i = 0, len = SexOpts.length; i < len; i++) {
				if (SexOpts[i].value == sex) {
					txt = SexOpts[i].label;
					break;
				}
			}
			return txt;
		},
		save() {
			Toast.loadingT('处理中...');
			let _ = this;
			_.loading = true;
			Request.post('/api/member/profile/update', _.profile)
				.then(res => {
					_.loading = false;
					Toast.success('保存成功');
				})
				.catch(res => {
					_.loading = false;
					Toast.error(res);
				});
		}
	}
};
</script>

<style></style>
